function savePicture()
{
  window.open( document.getElementById( "canvas" ) . toDataURL ( "image/png" ), "new_window_name" );
}

function drawLea( context, canvas )
{
  var lea = new Lea();

  lea.y = 350;
  lea.mx = canvas.width;
  lea.my = canvas.height;
  lea.draw( context );
}
function drawHome( context )
{
  var home = new Home();

  home.x = 350;
  home.y = 380; 
  home.draw( context );
}
function drawTree( context )
{
  var tree = new Tree();
  
  tree.x = 100;
  tree.y = 380;
  tree.draw( context );
}
function drawSky( context, canvas )
{
  var sky = new Sky();

  sky.y = 350;
  sky.mx = canvas.width;
  sky.draw( context );
}
function printText( context )
{
  var text = "Hello, World!";

  context.font = "40px serif";
  context.fillText( text, 375, 390 );
}
function drawCloud( context )
{
  var image = document.getElementById( 'picture' );

  context.drawImage( image, 75, 20 );  
}
function drawSun( context, sunAngleRotation, step )
{
  var range = 0.1,
      centerScale = 1,
      sun = new Sun();
    
  sun.rotation = sunAngleRotation * Math.PI / 180;
  sun.scale = centerScale + Math.sin( step ) * range;
  sun.draw( context );
}

function picture() {
  var canvas = document.getElementById( 'canvas' ),
      context = canvas.getContext( '2d' ),
      sunAngleRotation = 0,
      step = 0,
      speedSunRotation = 0.5,
      speed = 0.03;

  (function drawFrame() {
    window.requestAnimationFrame( drawFrame, canvas );
    context.clearRect( 0, 0, canvas.width, canvas.height );  

    drawLea( context, canvas );
    drawSky( context, canvas );
    drawTree( context );
    drawHome( context );
    drawSun( context, sunAngleRotation, step );
    step += speed;
    sunAngleRotation = ( sunAngleRotation < 360 ) ? sunAngleRotation + speedSunRotation : 0;
    drawCloud( context );
    printText( context ); 
  }());      
};
function event()
{
  picture();
  
  var saveButton = document.getElementById('save');
  saveButton.onclick = savePicture;
}
window.onload = event;